<template>
    <div class="container">
        <Breadcrumb :items="['menu.sys', 'menu.sys.log']" />
        <a-card title="管理员操作日志">
            <a-space direction="vertical" fill>
                <a-row>
                    <a-col :flex="1">
                        <a-form :model="searchForm" :label-col-props="{ span: 0 }" :wrapper-col-props="{ span: 22 }"
                            label-align="left">
                            <a-row :gutter="8">
                                <a-col :span="3">
                                    <a-form-item field="admin_name" label="管理员名字" :hide-label="true">
                                        <a-input v-model="searchForm.admin_name" placeholder="请输入管理员名字" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="3">
                                    <a-form-item field="action" label="操作内容" :hide-label="true">
                                        <a-input v-model="searchForm.action" placeholder="请输入操作内容" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-space>
                                        <a-button type="primary" @click="search()">
                                            <template #icon>
                                                <icon-search />
                                            </template>
                                            查询
                                        </a-button>
                                        <a-button @click="reset()">
                                            <template #icon>
                                                <icon-refresh />
                                            </template>
                                            重置
                                        </a-button>
                                    </a-space>
                                </a-col>
                            </a-row>
                        </a-form>
                    </a-col>
                </a-row>
                <a-table :data="tableData" :loading="loading" :bordered="{ cell: true }" :pagination="pagination"
                    @page-change="onPageChange" @page-size-change="onPageSizeChange">
                    <template #columns>
                        <a-table-column title="ID" data-index="id" :width="80" />
                        <a-table-column title="管理员" data-index="admin_id" :width="120">
                            <template #cell="{ record }">
                                {{ record.admin_name }}
                            </template>
                        </a-table-column>
                        <a-table-column title="事件" data-index="action_label" :width="180" />
                        <a-table-column title="内容" data-index="content" />
                        <a-table-column title="IP地址" data-index="ip" :width="120" />
                        <a-table-column title="创建时间" data-index="created_at" :width="180" />
                        <a-table-column title="操作" align="center" :width="120">
                            <template #cell="{ record }">
                                <a-space size="mini">
                                    <a-link @click="handleView(record)">
                                        查看
                                    </a-link>
                                </a-space>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
            </a-space>

        </a-card>

        <a-modal v-model:visible="detailVisible" title="日志详情" @cancel="detailVisible = false">
            <a-descriptions :data="detailData" layout="inline-horizontal" />
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { queryAdminLogList, queryAdminLogOne, delAdminLog } from '@/api/adminLog';
import type { AdminLogRecord, AdminLogParams } from '@/api/adminLog';

const loading = ref(false);
const tableData = ref<AdminLogRecord[]>([]);
const detailVisible = ref(false);
const detailData = ref<{ label: string; value: any }[]>([]);

const searchForm = reactive<AdminLogParams>({
    current: 1,
    pageSize: 10,
    admin_name: '',
    action: '',
    ip: '',
});

const pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 10,
});

const fetchData = async () => {
    loading.value = true;
    try {
        const res = await queryAdminLogList(searchForm);
        tableData.value = res.data.list;
        pagination.total = res.data.total;
    } catch (error) {
        Message.error('获取日志列表失败');
    } finally {
        loading.value = false;
    }
};

const search = () => {
    searchForm.current = 1;
    fetchData();
};

const reset = () => {
    searchForm.admin_id = undefined;
    searchForm.action = '';
    searchForm.ip = '';
    search();
};

const onPageChange = (current: number) => {
    searchForm.current = current;
    fetchData();
};

const onPageSizeChange = (pageSize: number) => {
    searchForm.pageSize = pageSize;
    searchForm.current = 1;
    fetchData();
};

const handleView = async (record: AdminLogRecord) => {
    try {
        const res = await queryAdminLogOne({ id: record.id });
        detailData.value = [
            { label: 'ID', value: res.data.id },
            { label: '管理员ID', value: res.data.admin_id },
            { label: '操作内容', value: res.data.action },
            { label: 'IP地址', value: res.data.ip },
            { label: '创建时间', value: res.data.create_time },
            { label: '更新时间', value: res.data.update_time },
        ];
        detailVisible.value = true;
    } catch (error) {
        Message.error('获取日志详情失败');
    }
};

onMounted(() => {
    fetchData();
});
</script>

<style scoped>


</style>

<script lang="ts">
export default {
    name: 'SysLog',
};
</script>